<template>
  <div>
    <el-card class="search-card">
      <div>
        <span id="logo" @click="goHome">就爱商城</span>
        <el-input
          style="width: 400px"
          placeholder="输入关键字，搜索好物"
          prefix-icon="el-icon-search"
          v-model="input"
        >
        </el-input>
        <el-button
          @click="handleQuery"
          id="search-btn"
          style="margin-left: 5px"
          type="primary"
          plain
          >开始搜索</el-button
        >
        <el-badge id="shopping-trolley" class="item">
          <el-button
            icon="el-icon-shopping-cart-full"
            @click="goShop"
            type="info"
            plain
            round
            >购物车</el-button
          >
        </el-badge>
      </div>
      <div style="margin-top: 10px">
        <table class="classify">
          <tr class="classify-tr">
            <!-- 分类栏 -->
            <td v-for="(item, index) in commodityType" :key="index">
              <span
                class="classify-name"
                @mouseover="openList(index)"
                @mouseout="overList(index)"
                @click="overList(index)"
                >{{ item.shopTypeName }}</span
              >

              <!-- 分类框 -->
              <div @mouseover="openList(index)" @mouseout="overList(index)">
                <el-card class="classify-card">
                  <div
                    style="
                      width: 900px;

                      min-height: 300px;
                      margin: 0 auto;
                    "
                  >
                    <ul
                      v-for="(row, index2) in item.children"
                      :key="index2"
                      class="commodity-type-chlidren"
                    >
                      <span
                        id="commodityTypeName"
                        @click="goCategory(index, index2)"
                      >
                        {{ row.shopTypeName }}
                      </span>
                      <el-divider></el-divider>
                      <li
                        class="commodity"
                        v-for="(commodity, index3) in row.children"
                        :key="index3"
                        @click="goDetails(commodity.id)"
                      >
                        {{ commodity.commodityName }}
                      </li>
                    </ul>
                  </div>
                </el-card>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </el-card>
  </div>
</template>

<script >
import { getShopType } from "../../../api/Commodity.js";
import { getCommodity } from "../../../api/Commodity.js";
import { CommodityQuery } from "../../../api/query";

export default {
  data() {
    return {
      // 搜索框
      input: "",

      // 商品类型
      commodityType: [],

      index: 0,
    };
  },

  methods: {
    // 跳转到商品详情页并向URL传递监听到的商品ID
    goDetails(getId) {
      this.$router.push({
        path: "/commoditydetails",
        query: {
          id: getId,
        },
      });
    },
    handleQuery() {
      
      if (this.input.length > 0) {
        CommodityQuery({ queryData: this.input })
          .then(({ data }) => {
            var res = data.data;
            res.forEach((e) => {
              e.imgpaht =
                "http://localhost:5000/" +
                e.imgPaht.slice(e.imgPaht.indexOf("files") + 6);
                console.log(e.imgpaht);
            });
            this.$emit("queryData", res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    goCategory(index, index2) {
      this.$router.push({
        path: "/category",
        query: {
          getType: index,
          getIndex: index2,
        },
      });
    },
    goHome() {
      this.$router.push("/");
    },

    openList(index) {
      let list = document.querySelectorAll(".classify-card")[index];
      list.style.opacity = 1;
      list.style.visibility = "visible";
    },
    overList(index) {
      let list = document.querySelectorAll(".classify-card")[index];
      list.style.opacity = 0;
      list.style.visibility = "hidden";
    },
    goShop() {
      this.$router.push({ path: "/ShoppingCart" });
    },
    fetch() {
      getShopType()
        .then((data) => {
          let res = data.data.data;
          // console.log(res);

          // 将父节点类型传入commodityType数组
          res.forEach((item) => {
            if (item.superiorShopTypeId == 0) {
              this.commodityType.push(item);
            }
          });

          // 将子节点类型传入父节点的children数组
          res.forEach((child) => {
            this.commodityType.forEach((father) => {
              if (child.superiorShopTypeId === father.id) {
                father.children.push(child);
              }
            });
          });

          // 将商品传入对应父节点的children数组
          getCommodity()
            .then((data) => {
              let commodity = data.data.data;
              // console.log(commodity);
              res.forEach((child) => {
                commodity.forEach((commodity) => {
                  if (child.id === commodity.shopTypeId) {
                    child.children.push(commodity);
                  }
                });
              });
            })
            .catch((err) => {
              console.log(err);
            });
          // console.log(this.commodityType);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.fetch();
  },
};
</script>

<style scoped>
#logo {
  font-size: 30px;
  position: relative;
  left: -200px;
  font-family: Cursive;
  font-weight: bold;
  cursor: pointer;
}

#shopping-trolley {
  position: relative;
  left: 100px;
}

.text {
  font-size: 14px;
}

/* .item {
  padding: 18px 0;
} */

.search-card {
  /* min-width: 1024px; */
  /* height: 130px; */
  padding: 0 120px;
}

.classify {
  font-size: 20px;
  font-weight: bold;
}
.classify-tr > * {
  width: 150px;
}

/* 分类框 */
.classify-card {
  width: 100%;
  min-height: 400px;
  position: absolute;
  left: 0px;
  visibility: hidden;
  /* visibility: visible; */
  z-index: 10000;
  font-weight: bold;
  background-color: whitesmoke;
}

.commodity-type-chlidren {
  font-size: 20px;
  margin: 0 40px;
  float: left;
}

/* 指针停留在分类框的分类名上 */
#commodityTypeName:hover {
  cursor: pointer;
  color: #b4a078;
}

/* 指针停留在分类框的商品类型名上 */
.classify-name:hover {
  cursor: pointer;
  color: orange;
  border-bottom: 3px solid sandybrown;
}

.commodity {
  margin-top: 30px;
  font-size: 15px;
}

/* 指针停留在分类框的商品上 */
.commodity:hover {
  cursor: pointer;
  color: orange;
}

/* 去除ul列表的序号点 */
li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
</style>